<template>
  <div class="wrapper">
    <common-header :title="title"></common-header>
    <common-scroll class="scroll"
                   ref="scroll">
      <div class="content"
           v-html="article">
      </div>
    </common-scroll>
  </div>
</template>

<script>
import CommonHeader from 'common/header/Header'
import CommonScroll from 'common/scroll/Scroll'
export default {
  name: 'HomeArticle',
  components: {
    CommonHeader,
    CommonScroll
  },
  props: {
    title: {
      type: String,
      default: '文章详情'
    }
  },
  data () {
    return {
      article: ''
    }
  },
  methods: {
    getArticleDetial () {
      const id = this.$route.params.id
      this.$api.index.getArticleDetail({ article_id: id })
        .then(this.getArticleDetialSucc)
    },
    getArticleDetialSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        console.log(data)
        this.article = data.content
      }
    }
  },
  activated () {
    this.$nextTick(() => {
      this.getArticleDetial()
      this.$refs.scroll._initalScroll()
    })
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wrapper
  position absolute
  top 0
  left 0
  bottom 0
  right 0
  background-color #fff

  .scroll
    top 120px

    .content
      padding()
      padding-bottom 20px
      font-size $fzFifth
      color $graySecond
</style>
